<template>
  <div class="outer">
    <!-- 面包屑title -->
    <div class="breadTitle">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 卡片视图部分 -->

    <div class="user-body" border stripe>
      <el-card>
        <el-row>
          <el-col>
            <el-button type="primary">添加角色</el-button>
          </el-col>
        </el-row>
        <!-- 角色列表区 -->
        <el-table :data="rolesData" border strips>
          <!-- 展开列 -->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-row
                v-for="item1 in scope.row.children"
                :key="item1.id"
                class="vcenter"
              >
                <!-- 一级权限 -->
                <el-col :span="5">
                  <el-tag
                    effect="plain"
                    closable
                    @close="closeTag(scope.row, item1.id)"
                  >
                    {{ item1.authName }}
                  </el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <!-- 二级和三级权限 -->
                <el-col :span="19">
                  <el-row
                    v-for="item2 in item1.children"
                    :key="item2.id"
                    class="vcenter"
                  >
                    <el-col :span="5">
                      <el-tag
                        effect="plain"
                        type="success"
                        closable
                        @close="closeTag(scope.row, item2.id)"
                      >
                        {{ item2.authName }}
                      </el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="19">
                      <el-row
                        v-for="item3 in item2.children"
                        :key="item3.id"
                        class="float"
                      >
                        <el-tag
                          closable
                          effect="plain"
                          type="warning"
                          @close="closeTag(scope.row, item3.id)"
                        >
                          {{ item3.authName }}
                        </el-tag>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

              <!-- <pre>
                {{ scope.row }}
              </pre> -->
            </template>
          </el-table-column>
          <!-- 索引列 -->
          <el-table-column type="index"></el-table-column>
          <el-table-column label="角色名称" prop="roleName"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column label="操作" width="300px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit"
                >编辑</el-button
              >
              <el-button size="mini" type="danger" icon="el-icon-delete"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-setting"
                @click="setUserPower(scope.row)"
                >分配权限</el-button
              >
              <!-- 分配权限对话框 -->
              <el-dialog
                title="分配用户权限"
                :visible.sync="userPowerVisible"
                width="50%"
              >
                <!-- 树形控件 -->
                <el-tree
                  :data="userPower"
                  :props="userPowerProps"
                  show-checkbox
                  default-expand-all
                  :default-checked-keys="treeCheckData"
                  node-key="id"
                  ref="userPowerTree"
                ></el-tree>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="userPowerVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateUserPower"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      rolesData: [],
      userPowerVisible: false,
      userPower: [],
      // 树形结构配置
      userPowerProps: {
        children: 'children',
        label: 'authName'
      },
      // 树形选中框预设数据
      treeCheckData: [],
      roleId: ''
    }
  },
  methods: {
    async getRolesData () {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) return false
      this.rolesData = res.data
    },
    // 关闭标签事件
    async closeTag (role, id) {
      const tagRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (tagRes !== 'confirm') {
        this.$message.info('取消删除')
      } else {
        const { data: delRes } = await this.$http.delete(
          `roles/${role.id}/rights/${id}`
        )
        if (delRes.meta.status !== 200) {
          return this.$message.error('删除失败')
        } else {
          // this.getRolesData() => 调用该函数会发生页面的完整渲染
          role.children = delRes.data
          this.$message.success('删除成功')
        }
      }
    },
    // 设置用户权限
    async setUserPower (row) {
      this.roleId = row.id
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg)
      } else {
        this.userPower = res.data
        // 获取三级节点的id
        this.treeCheckData = []
        this.setCheckBoxData(row, this.treeCheckData)
        this.userPowerVisible = true
      }
    },
    // 设置cheakbox数组数据
    setCheckBoxData (role, arr) {
      if (!role.children) {
        return arr.push(role.id)
      }
      role.children.forEach(item => {
        this.setCheckBoxData(item, arr)
      })
    },
    // 点击确定按钮提交权限数据到服务器
    async updateUserPower () {
      const keys = [
        ...this.$refs.userPowerTree.getCheckedKeys(),
        ...this.$refs.userPowerTree.getHalfCheckedKeys()
      ]
      const idStr = keys.join(',')
      const { data: res } = await this.$http.post(
        `roles/${this.roleId}/rights`,
        {
          rids: idStr
        }
      )
      if (!res.meta.status === 200) {
        this.$message.error(res.meta.msg)
      } else {
        this.$message.success(res.meta.msg)
        console.log(res)
      }
      this.getRolesData()
      this.userPowerVisible = false
    }
  },
  created () {
    this.getRolesData()
  }
}
</script>
<style lang="less" scoped>
.outer {
  background-color: #fff;
}

.breadTitle {
  background-color: #cdf;
  padding-bottom: 20px;
}

.el-row {
  margin: 7px;
}

.vcenter {
  display: flex;
  align-items: center;
}

.float {
  float: left;
}
</style>
